<template>
  <layout fixed-navbar>
    <back-navbar>填写信息</back-navbar>
    <div class="box">
      <e-input-label-list>
        <e-input-label
          :has-error="errors.has('company')"
          label="公司名称">
          <e-input
            v-validate="{ required: true, min: 4, max: 40 }"
            v-model="company"
            placeholder="请填写公司名称"
            name="company"
            data-vv-as="公司名称"/>
        </e-input-label>
        <e-input-label
          :has-error="errors.has('name')"
          label="姓名">
          <e-input
            v-validate="{ required: true, min: 2, max: 16 }"
            v-model="name"
            placeholder="请输入姓名"
            name="name"
            data-vv-as="姓名"/>
        </e-input-label>
        <e-input-label
          :has-error="errors.has('phone')"
          label="联系电话">
          <e-input
            v-validate="{ required: true, regex: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/ }"
            v-model="phone"
            placeholder="请输入11位手机号码"
            name="phone"
            data-vv-as="联系电话"/>
        </e-input-label>
        <e-input-label
          :has-error="errors.has('email')"
          label="邮箱地址">
          <e-input
            v-validate="{ required: true, email: true }"
            v-model="email"
            placeholder="请输入邮箱地址"
            name="email"
            data-vv-as="邮箱地址"/>
        </e-input-label>
        <e-input-label
          :has-error="selectError"
          label="服务类型">
          <div class="select"><div
            :class="{ 'select__text--placeholder': type === null }"
            class="select__text"
            @click="show = !show">{{ type === null ? '选择服务类型' : typeLabels[type - 1] }}</div><fa-icon
              class="block select__icon"
              icon="chevron-right"/></div>
        </e-input-label>
      </e-input-label-list>
    </div>
    <div class="error">{{ error }}</div>
    <div class="last">
      <button
        class="btn"
        @click="publish">发布</button>
    </div>
    <van-popup
      v-model="show"
      position="bottom">
      <div class="select-list">
        <div
          class="select-item"
          @click="select(1)">展位预定</div>
        <div
          class="select-item"
          @click="select(2)">拼团行程</div>
        <div
          class="select-item"
          @click="select(3)">行程定制</div>
        <div
          class="select-item"
          @click="select(4)">展台搭建</div>
        <div
          class="select-item"
          @click="select(5)">展品运输</div>
        <div
          class="select-item"
          @click="select(6)">展会门票</div>
      </div>
    </van-popup>
    <van-popup
      v-model="showCard"
      position="bottom">
      <div class="card">
        <div class="card__content">
          <img
            v-lazy="showCardImage"
            alt="邀请你参加">
        </div>
        <div class="card__info">长按上方图片保存 分享给好友</div>
      </div>
    </van-popup>
    <van-popup
      v-model="showPublishSuccessMessage"
      :close-on-click-overlay="false"
      class="br-4">
      <div class="modal">
        <div class="modal__title"><fa-icon
          :icon="['far', 'check-circle']"
          class="success mr-8"/>发布成功</div>
        <div class="modal__body">
          信息发布成功
          <br>
          快生成海报分享给更多好友吧！！！
        </div>
        <div class="modal__footer">
          <div
            class="btn2"
            @click="showCardModal">一键生成海报</div>
        </div>
      </div>
    </van-popup>
  </layout>
</template>

<style lang="scss" scoped>
  .btn2 {
    width: 360px;
    height: 92px;
    background-color: #FA8C01;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
  }

  .success {
    color: #8ad361;
  }
  .modal {
    width: 600px;
    border-radius: 4px;
    &__title {
      text-align: center;
      padding: 24px 32px 0;
      font-size: 32px;
      color: #333;
      &::after {
        content: '';
        padding: 0 32px;
        height: 2px;
        background-color: #eee;
        display: block;
        margin-top: 24px;
      }
    }

    &__body {
      padding: 48px 64px;
      font-size: 28px;
      color: #333;
      line-height: 48px;
    }

    &__footer {
      padding: 24px 32px;
      display: flex;
      justify-content: center;
    }
  }

  .box {
    padding: 24px 32px;
  }

  .btn {
    border: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    height: 100px;
    width: 600px;
    background-color: #FA8C01;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 36px;
  }

  .error {
    height: 34px;
    font-size: 24px;
    text-align: center;
    color: #F30808;
  }

  .last {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  .select {
    height: 120px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    &__icon {
      flex-shrink: 0;
      font-size: 30px;
      color: #B3B3B3;
      padding-left: 16px;
    }
    &__text {
      &--placeholder {
        color: #757575;
      }
      flex: 1;
      font-size: 28px;
      color: #343434;
    }
  }

  .select-list {
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 0;
  }
  .select-item {
    padding: 32px;
    font-size: 32px;
    color: #343434;
    margin-bottom: 32px;
  }

  .card {
    height: 100vh;
    flex-direction: column;
    display: flex;
    &__content {
      padding: 32px;
      flex: 1;
      overflow: auto;
      background-color: rgba(0, 0, 0, .7);
      img {
        display: block;
        width: 100%;
      }
    }
    &__info {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #343434;
    }
  }
</style>

<script>
import Layout from '@/components/Layout'
import BackNavbar from '@/components/BackNavbar'
import EInput from '@/components/Input'
import EInputLabel from '@/components/InputLabel'
import EInputLabelList from '@/components/InputLabelList'
import { ValidateMixin } from '@/mixins'
import { publishExhibitionCooperation } from '@/api'

export default {
  components: {
    Layout,
    BackNavbar,
    EInput,
    EInputLabel,
    EInputLabelList
  },
  mixins: [ValidateMixin],
  data () {
    return {
      company: '',
      name: '',
      phone: '',
      email: '',
      type: null,
      show: false,
      typeLabels: [
        '展位预定',
        '拼团行程',
        '行程定制',
        '展台搭建',
        '展品运输',
        '展会门票'
      ],
      selectError: false,
      showCard: false,
      showCardImage: '',
      showPublishSuccessMessage: false
    }
  },
  methods: {
    showCardModal () {
      this.showPublishSuccessMessage = false
      this.showCard = true
    },
    async publish () {
      const valid = await this.$validator.validate()
      if (this.type === null) {
        this.selectError = true
        return
      } else {
        this.selectError = false
      }
      if (!valid) return

      const toast = this.$toast.loading({
        duration: 0,
        forbidClick: true
      })

      const { code, posterUrl } = await publishExhibitionCooperation({
        ex_id: this.$route.params.id,
        company_name: this.company,
        username: this.name,
        telephone: this.phone,
        email: this.email,
        type: this.type
      })
      toast.clear()
      if (code === 1) {
        this.showCardImage = posterUrl
        this.showPublishSuccessMessage = true
      }
    },
    select (type) {
      this.show = false
      this.type = type
      this.selectError = false
    }
  }
}
</script>
